<!DOCTYPE html>
<html>
<head>
  <title>模版表单</title>
  {include file="public/head" /}
    <style>
        #up_mould{position: relative}
        #uploadInf{position: absolute;right: -370px;top: 10px;}
    </style>
</head>
<body>
<div class="wrapper" >

  <!-- Content Wrapper. Contains page content -->
  <div class="content" style="background: #fff">


    <!-- Main content -->
    <section class="container-fluid" >

      <div class="row" >
        <div class="col-xs-12">
             <!-- form start -->
            <form id="attrForm" action="" class="form-horizontal">
            <input type="hidden" name="id" id="cid" value="{$data.id}">
              <div class="box-body">
                <div class="form-group">
                  <label class="col-xs-2 form-control-static">模版编号</label>
                  <div class="col-xs-10">
                    <input type="text" class="form-control" name="number" placeholder="" value="{$data.number}">
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-xs-2 form-control-static">所属分类</label>
                  <div class="col-xs-10">
                      <select class="form-control select2" onPropertyChange="showValue()" id="setmenu" name="c_id" style="width: 100%;">
                          <option value="">请选择分类</option>
                          {foreach name="list" item="cate"}
                          <option value="{$cate.id}"  {$data.c_id==$cate.id?'selected':''}>{$cate.category}</option>
                          {/foreach}
                      </select>
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-xs-2 form-control-static">价格</label>
                  <div class="col-xs-10">
                      <input type="number" class="form-control" name="price" value="{$data.price>0?$data.price:'0'}">
                  </div>
                </div>
                  <div class="form-group">
                      <label class="col-xs-2 form-control-static">主图与模版上传</label>
                      <div class="col-xs-10">
                          <div class="row">{if $data.images}已上传主图：<img width="150" src="/{$data.images}" />{/if}</div>
                          <div class="row form-control-static">{if $data.html_url}已上传模版文件：{$data.html_url}{/if}</div>
                          <div class="row" id="up_mould"></div>
                      </div>
                      <input type="hidden" name="html_url" id="html_url" value="{$data.html_url}" />
                      <input type="hidden" name="images" id="images" value="{$data.images}" />
                      <input type="hidden"  id="has_image" value="" />
                  </div>
                <div class="form-group">
                    <label class="col-xs-2 form-control-static">属性</label>
                    <div class="col-xs-10">
                        <table class="table table-hover table-striped">
                            <tbody>
                            {volist name="attrs" id="v"}
                            <tr style="padding-left: 100px">
                                <th class="col-xs-2" style="color: #666;">{$v.name}：</th>
                                <td>
                                    {volist name="v.attr_value" id="val"}<span class="col-xs-4"> <input {in name="val.id" value="$data.attr_id"}checked{/in} type="checkbox" name="attr_id[]" value="{$val.id}" /> {$val.value}</span>{/volist}
                            </tr>
                            {/volist}
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-2 form-control-static">来源</label>
                    <div class="col-xs-10">
                        <input type="text" class="form-control" name="source" value="{$data.source}">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-2 form-control-static">首页推荐</label>
                    <div class="col-xs-10">
                        <label class="checkbox-inline">
                            <input type="radio" name="is_index" value="1" {$data.is_index==1?'checked':''}>推荐
                        </label>
                        <label class="checkbox-inline">
                            <input type="radio" name="is_index" {$data.is_index==0?'checked':''} value="0">不推荐
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-2 form-control-static">是否发布</label>
                    <div class="col-xs-10">
                        <label class="checkbox-inline">
                            <input type="radio" name="is_sale" value="1" {$data.is_sale==1?'checked':''}>发布
                        </label>
                        <label class="checkbox-inline">
                            <input type="radio" name="is_sale" {$data.is_sale==0?'checked':''} value="0">不发布
                        </label>
                    </div>
                </div>
              </div>
            </form>
        </div>
      </div>
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
</div>
<!-- ./wrapper -->
{include file="public/js" /}
<link rel="stylesheet" href="__STATIC__/zyupload/zyupload-1.0.0.min.css">
<script src="__STATIC__/zyupload/zyupload-1.0.0.min.js"></script>
<script type="text/javascript">
//根据需要填写需要的模块
function confirm() {
    return $("#attrForm").serialize();
}
layui.use('layer', function() {
    var regstr = "jpg|png|jpeg";
// 上传模版
    $("#up_mould").zyUpload({
        width: "60%",                 // 宽度
        height: "350px",                 // 宽度
        itemWidth: "140px",                 // 文件项的宽度
        itemHeight: "115px",                 // 文件项的高度
        url: "{:url('Mould/upload')}",              // 上传文件的路径
        fileType: ["jpg", "png", "jpeg", "zip", "rar"],// 上传文件的类型
        fileSize: 51200000,                // 上传文件的大小
        multiple: true,                    // 是否可以多个文件上传
        dragDrop: false,                   // 是否可以拖动上传文件
        tailor: false,                   // 是否可以裁剪图片
        del: true,                    // 是否可以删除文件
        finishDel: false,  				  // 是否在上传文件完成后删除预览
        /* 外部获得的回调接口 */
        onSelect: function (selectFiles, allFiles) {    // 选择文件的回调方法  selectFile:当前选中的文件  allFiles:还没上传的全部文件
            var selectname = selectFiles[0].name;
            var re =/[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/gi;
            if (re.test(selectname)) {
                layer.alert('文件名称不能含有中文');
                $('div.upload_append_list').index(selectFiles[0].index).remove();
                return false;
            }
            var index = selectname.lastIndexOf(".");
            var suffix = selectname.substring(index + 1, selectname.length);
            if (regstr.indexOf(suffix) > -1) {
                if ($('#has_image').val()) {
                    layer.alert('主图只能上传一张');
                    $('.upload_append_list').index(selectFiles[0].index).remove();
                    return false;
                }
                $('#has_image').val(1);
            }
        },
        onDelete: function (file, files) {              // 删除一个文件的回调方法 file:当前删除的文件  files:删除之后的文件
        },
        onSuccess: function (file, response) {          // 文件上传成功的回调方法
            var index = response.lastIndexOf(".");
            var suffix = response.substring(index + 1, response.length);

            if (regstr.indexOf(suffix) != -1) {
                $('#images').val(response);
            } else {
                $('#html_url').val(response);
            }
            $("#uploadInf").append("<p>上传成功，文件地址是：" + response + "</p>");
        },
        onFailure: function (file, response) {          // 文件上传失败的回调方法
        },
        onComplete: function (response) {           	  // 上传完成的回调方法
        }
    });

})
</script>
</body>
</html>